import React, { PureComponent } from 'react';
import SwiperCore, { Pagination, Autoplay, EffectFade } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/swiper.less';
import 'swiper/components/pagination/pagination.less';
import 'swiper/components/effect-fade/effect-fade.min.css';
import bg1 from '../../../asserts/bg1.jpg';
import bg2 from '../../../asserts/bg2.jpg';
import bg3 from '../../../asserts/bg3.jpg';
import bg4 from '../../../asserts/bg4.jpg';
import './index.less';

SwiperCore.use([Pagination, Autoplay, EffectFade]);
class index extends PureComponent {
  render () {
    return (
      <>
        <div className="banner-main">
          <Swiper
            effect="fade"
            loop
            autoplay={{
              delay: 3000,
              disableOnInteraction: false,
            }}
            pagination={{
              clickable: true,
            }}
          >
            <SwiperSlide className="swiper-no-swiping">
              <img src={bg1} alt="" />
              <div className="word">
                <p>
                  <span />
                  <span>安全存储</span>
                </p>
                <p>
                  <span>生活井井有条</span>
                  <span />
                </p>
              </div>
            </SwiperSlide>
            <SwiperSlide className="swiper-no-swiping">
              <img src={bg2} alt="" />
              <div className="word">
                <p>
                  <span />
                  <span>在线预览</span>
                </p>
                <p>
                  <span>文件即开即看</span>
                  <span />
                </p>
              </div>
            </SwiperSlide>
            <SwiperSlide className="swiper-no-swiping">
              <img src={bg3} alt="" />
              <div className="word">
                <p>
                  <span />
                  <span>多端并用</span>
                </p>
                <p>
                  <span>数据随身携带</span>
                  <span />
                </p>
              </div>
            </SwiperSlide>
            <SwiperSlide className="swiper-no-swiping">
              <img src={bg4} alt="" />
              <div className="word">
                <p>
                  <span />
                  <span>好友分享</span>
                </p>
                <p>
                  <span>共度幸福时光</span>
                  <span />
                </p>
              </div>
            </SwiperSlide>
          </Swiper>
        </div>
      </>
    );
  }
}

export default index;
